<!--  -->
<template>
  <div class="content">
    <el-upload
      class="upload-excel"
      ref="check"
      action="/user/uploadex"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :auto-upload="false"
        >
      <el-button class="choosefile el-upload" slot="trigger" size="small" type="primary">选取考勤文件</el-button>
      <el-button class="submitbtn el-upload" size="small" type="success" @click="submitUpload('check')">上传考勤文件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx格式文件，且不超过3M</div>
    </el-upload>
    <el-upload
      class="upload-excel"
      ref="leave"
      action="/user/exportleave"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :auto-upload="false"
        >
      <el-button class="choosefile el-upload" slot="trigger" size="small" type="primary">选取请假文件</el-button>
      <el-button class="submitleavebtn el-upload" size="small" type="success" @click="submitUpload('leave')">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx格式文件，且不超过3M</div>
    </el-upload>
    <el-upload
      class="upload-excel"
      ref="overtime"
      action="/user/uploadex"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :auto-upload="false"
        >
      <el-button class="choosefile el-upload" slot="trigger" size="small" type="primary">选取加班文件</el-button>
      <el-button class="submitoutbtn el-upload" size="small" type="success" @click="submitUpload('overtime')">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx格式文件，且不超过3M</div>
    </el-upload>
    <el-upload
      class="upload-excel"
      ref="forget"
      action="/user/uploadex"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :auto-upload="false"
        >
      <el-button class="choosefile el-upload" slot="trigger" size="small" type="primary">选取忘打卡文件</el-button>
      <el-button class="submitforgetbtn el-upload" size="small" type="success" @click="submitUpload('forget')">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx格式文件，且不超过3M</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
        fileList: [],//{name: 'food.jpeg', url: 'https://fus}
        fileName:""
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
      beforeUpload(file){
      this.files = file;
      const extension = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 3
      if (!extension) {
        this.$message.warning('上传只能是xlsx格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.warning('上传模板大小不能超过 3MB!')
        return false;
      }
      this.fileName = file.name;
      console.log(this.fileName+"this.fileName");
        return false // 返回false不会自动上传
      },
      submitUpload(str) {
        let url='/user/uploadex'
        switch(str){
          case 'check':
            this.$refs.check.submit();
            url='/user/uploadex'
            break;
          case 'leave':
            this.$refs.leave.submit();
            url='/user/uploadexleave'
            break;
          case 'overtime':
            this.$refs.overtime.submit();
            url='/user/uploadexovertime'
            break;
          case 'forget':
            this.$refs.forget.submit();
            url='/user/uploadexforget'
            break;
        }
        //this.$refs.upload.submit();
        if(this.fileName == ""){
            this.$message.warning('请选择要上传的文件！')
            return false
        }
        let fileFormData = new FormData();
        console.log(this.files);
        fileFormData.append('file', this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
        let requestConfig = {
            headers: {
            'Content-Type': 'multipart/form-data'
            },
        }
        this.$axios.post(url, fileFormData, requestConfig).then((data) => {
        if (data && data.code === 200) {
          this.$message({
            message: data.msg,
            type: 'success',
            duration: 3000,
            onClose: () => {
                this.dialogFormVisible = false
                //this.getuserlist();
             }
            })
        } else {
            this.$message.error(data.msg)
        }
      }) 
      },
      handleRemove(file, fileList) {
        //console.log(file, fileList);
        //this.$message.warning(`上传${file.name}!`)
      },
      handlePreview(file) {
        console.log(file);
      }
  },

  created(){}
}

</script>
<style  scoped lang='scss' >
.upload-excel {
  width: 360px;
  margin: 30px auto;
  .el-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
  }
  .submitbtn {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
  }
  .submitleavebtn{
    position: absolute;
    top: 182px;
    left: 50%;
    transform: translateX(-50%);
  }
  .submitoutbtn{
    position: absolute;
    top: 282px;
    left: 50%;
    transform: translateX(-50%);
  }
  .submitforgetbtn{
    position: absolute;
    top: 382px;
    left: 50%;
    transform: translateX(-50%);
  }
  .el-upload__tip {
    font-size: 20px;
    color: #606266;
    margin-top: 7px;
  }
}
</style>